<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css">
		<style type="text/css">
			* {padding: 0;margin: 0;}
			html,body{width: 100%;height: 100%;}
			#upupoo_bottomLayer,#upupoo_imageLayer,#upupoo_exhibitionLayer,#upupoo_exhibitionLayer_two{
				width: 100%;
				height: 100%;
			}
			#upupoo_bottomLayer {
				position: relative;
				z-index: 2;
			}
			#upupoo_imageLayer {
				position: absolute;
				z-index: 10;
			}
			#upupoo_imageLayer>#upupoo_imageLayerImg{
				width: 100% ;
				height: 100%;
				display: block;
				position: absolute;
				z-index: 11;
			}
			#upupoo_exhibitionLayer {
				position: absolute;
				z-index: 100;
			}
			#upupoo_exhibitionLayer_two {
				position: absolute;
				z-index: 101;
			}
            form{
                position: absolute;
                z-index: 11;
                top: 100px;
            }
		</style>
		
	</head>
	<body onselectstart="return false">
        <div id="upupoo_bottomLayer">
            <form action="#">
                <h2>感谢注册</h2>
                <div class="username">
                    <label for="username">用户名：</label>
                    <input type="text" id="username">
                </div>
                <div class="nick">
                    <label for="nick">昵&nbsp;&nbsp;&nbsp;称：</label>
                    <input type="text" id="nick">
                </div>
                <div class="password">
                    <label for="password">密&nbsp;&nbsp;&nbsp;码：</label>
                    <input type="text" id="password">
                </div>
                <div class="submit">
                    <button>注册</button>
                </div>
            </form>
			<div id="upupoo_imageLayer">
				<img src="" id="upupoo_imageLayerImg" alt="" />
				<div id="upupoo_exhibitionLayer">

				</div>
				<div id="upupoo_exhibitionLayer_two">
					<div class="lhy_bgcontainer"></div>
				</div>
			</div>
		</div>
		<script src="upupooConfig.json" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/snow.js"></script>
		<script type="text/javascript">
			var upupoo_imageLayerImg = document.getElementById('upupoo_imageLayerImg');
				upupoo_imageLayerImg.src = upupooConfig.bgImg;
			//配置
			(function(){
                var container = document.querySelector(".lhy_bgcontainer");
                if(/MSIE 6|MSIE 7|MSIE 8/.test(navigator.userAgent)) {
                    return ;
                } else {
                    if(/MSIE 9|MSIE 10/.test(navigator.userAgent)) {
                        $(container).css("height", $(window).height()).bind("click", function() {
                            $(this).remove()
                        })
                    }
                }
                var containerWidth = $(container).width();
                var containerHeight = $(container).height();
                var particle;
                var camera;
                var scene;
                var renderer;
                var mouseX = 0;
                var mouseY = 0;
                var windowHalfX = window.innerWidth / 2;
                var windowHalfY = window.innerHeight / 2;
                var particles = [];
                var particleImage = new Image();
                particleImage.src = "image/white_snow.png";
                var snowNum = 30*upupooConfig.density.value + 10;
//													
                function init() {
                    camera = new THREE.PerspectiveCamera(upupooConfig.size.value*1 + 20, containerWidth / containerHeight, 1, 10000);
                    camera.position.z = 1000;
                    scene = new THREE.Scene();
                    scene.add(camera);
                    renderer = new THREE.CanvasRenderer();
                    renderer.setSize(containerWidth, containerHeight);
                    var material = new THREE.ParticleBasicMaterial({
                        map: new THREE.Texture(particleImage)
                    });
                    for(var i = 0; i < snowNum; i++) {
                        particle = new Particle3D(material);
                        particle.position.x = Math.random() * 2000 - 1000;
                        particle.position.y = Math.random() * 2000 - 1000;
                        particle.position.z = Math.random() * 2000 - 1000;
                        particle.scale.x = particle.scale.y = 1;
                        scene.add(particle);
                        particles.push(particle)
                    }
                    container.appendChild(renderer.domElement);
                    document.addEventListener("mousemove", onDocumentMouseMove, false);
                    setInterval(loop, 33-upupooConfig.speed.value*0.33+1)
                }

                function onDocumentMouseMove(event) {
                    mouseX = event.clientX - windowHalfX;
                    mouseY = event.clientY - windowHalfY
                }

                function onDocumentTouchStart(event) {
                    if(event.touches.length == 1) {
                        event.preventDefault();
                        mouseX = event.touches[0].pageX - windowHalfX;
                        mouseY = event.touches[0].pageY - windowHalfY
                    }
                }

                function onDocumentTouchMove(event) {
                    if(event.touches.length == 1) {
                        event.preventDefault();
                        mouseX = event.touches[0].pageX - windowHalfX;
                        mouseY = event.touches[0].pageY - windowHalfY
                    }
                }

                function loop() {
                    for(var i = 0; i < particles.length; i++) {
                        var particle = particles[i];
                        particle.updatePhysics();
                        with(particle.position) {
                            if(y < -1000) {
                                y += 2000
                            }
                            if(x > 1000) {
                                x -= 2000
                            } else {
                                if(x < -1000) {
                                    x += 2000
                                }
                            }
                            if(z > 1000) {
                                z -= 2000
                            } else {
                                if(z < -1000) {
                                    z += 2000
                                }
                            }
                        }
                    }
                    camera.position.x += (mouseX - camera.position.x) * 0.005;
                    camera.position.y += (-mouseY - camera.position.y) * 0.005;
                    camera.lookAt(scene.position);
                    renderer.render(scene, camera)
                }
                init()
			}())
		</script>
	</body>
</html>
